import {
  StyleSheet, Text, View, Dimensions, PixelRatio, Image,Platform
} from 'react-native';
import react, { useState, useEffect } from 'react';
import { TouchableOpacity } from 'react-native';
import './global';

const Btn = ({ style, font, children, ...rest }) => {
  return (
    <TouchableOpacity
      {...rest}
      style={
        [{ alignItems: 'center', justifyContent: 'center' }, style
        ]}
    // onPress={()=>{console.log(1234)}}
    >
      <Text style={font}>{children}</Text>
    </TouchableOpacity>
  )
}
// console.log(Platform.OS)
// console.log(Platform.constants)
// 根据Platform.select方法进行兼容，实现不一样的系统不一样的展示方法
Platform.select({
  android: ()=><Text>hello</Text>,
  ios: ()=><Text>ios</Text>,
  default: ()=><Text>else</Text>,
})

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        style={{ width: 100, height: 100 }}
        source={require('./assets/user.png')}
      />
      <Btn
        // 实际起作用的是上面生成的那个组件，那个组件没有事件所以不能点击出效果,
        // 可以在上面写函数，也可以用...rest来绑定剩余的函数
        onPress={() => { console.log(123456) }}
        style={{ width: p2d(150), height: p2d(150), backgroundColor: 'red', borderRadius: 25 }}
        font={{ color: 'white', fontSize: 20 }}
      >
        自定义按钮
      </Btn>
      {/* activeOpacity={0.5}按钮点击时会产生透明度 */}
      <TouchableOpacity activeOpacity={0.5}>
        <Text >ffffffffffff</Text>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // 相当于把里面的属性展开表现出来，跟...rest一样
    ...Platform.select({
      android: {
          backgroundColor: 'green'
      },
      ios: {
          backgroundColor: 'red'
      },
      default: {
          // other platforms, web for example
          backgroundColor: 'blue'
      }
  })
  },
  text: {
    fontSize: 15,
    marginTop: 15,
    width: '70%'
  },
  font: {
    color: '#fca',
    fontSize: 32
  }
});
